<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书监控插件 - 配置</title>
    <link rel="stylesheet" href="shared/common.css">
    <link rel="stylesheet" href="options.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🔍 小红书网络监控插件配置</h1>
            <p class="subtitle">自定义要监控的URL模式和拦截规则</p>
            <div class="config-status" id="configStatus">
                <span class="status-indicator"></span>
                <span class="status-text">配置已同步</span>
            </div>
        </header>

        <main class="main-content">
            <!-- API服务器配置 -->
            <section class="config-section">
                <h2>🌐 API服务器配置</h2>
                <div class="setting-item">
                    <label class="input-setting">
                        <span class="setting-label">API服务器地址</span>
                        <input type="url" id="apiHostInput" placeholder="https://your-api-server.com" class="text-input">
                    </label>
                    <p class="setting-description">用于数据同步的后端API服务器地址</p>
                </div>
                
                <div class="api-status-display" id="apiStatusDisplay">
                    <div class="status-item">
                        <span class="status-label">连接状态:</span>
                        <span class="status-value" id="apiConnectionStatus">未配置</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">登录状态:</span>
                        <span class="status-value" id="apiLoginStatus">未登录</span>
                    </div>
                </div>
                
                <div class="button-group">
                    <button id="saveApiConfigBtn" class="btn btn-primary">💾 保存API配置</button>
                    <button id="testApiConnectionBtn" class="btn btn-secondary">🔗 测试连接</button>
                </div>
            </section>
            
            <!-- 账号密码登录 -->
            <section class="config-section" id="loginForm">
                <h2>🔑 账号密码登录</h2>
                <div class="setting-item">
                    <label class="input-setting">
                        <span class="setting-label">用户名</span>
                        <input type="text" id="usernameInput" placeholder="请输入用户名" class="text-input">
                    </label>
                </div>
                <div class="setting-item">
                    <label class="input-setting">
                        <span class="setting-label">密码</span>
                        <input type="password" id="passwordInput" placeholder="请输入密码" class="text-input">
                    </label>
                </div>
                <div class="setting-item">
                    <label class="checkbox-item">
                        <input type="checkbox" id="useOtpCheckbox" checked>
                        <span class="checkmark"></span>
                        <span class="checkbox-label">需要动态验证码 (OTP)</span>
                    </label>
                </div>
                <div class="setting-item" id="otpGroup">
                    <label class="input-setting">
                        <span class="setting-label">动态验证码</span>
                        <input type="text" id="otpInput" placeholder="请输入6位OTP代码" class="text-input" maxlength="6">
                    </label>
                </div>
                <div class="button-group">
                    <button id="loginBtn" class="btn btn-success">🔓 登录</button>
                    <button id="logoutBtn" class="btn btn-warning" style="display: none;">🚪 退出登录</button>
                </div>
            </section>

            <!-- 全局开关 -->
            <section class="config-section">
                <h2>🔧 全局设置</h2>
                <div class="setting-item">
                    <label class="switch-container">
                        <span class="setting-label">启用监控</span>
                        <input type="checkbox" id="enableMonitoring" checked>
                        <span class="switch-slider"></span>
                    </label>
                    <p class="setting-description">关闭后将停止所有网络请求监控</p>
                </div>
                
                <div class="setting-item">
                    <label class="switch-container">
                        <span class="setting-label">启用增强拦截</span>
                        <input type="checkbox" id="enableEnhanced" checked>
                        <span class="switch-slider"></span>
                    </label>
                    <p class="setting-description">启用隐蔽版JavaScript API拦截，获取完整响应内容且不被检测</p>
                </div>
            </section>

            <!-- 监控类型配置 -->
            <section class="config-section">
                <h2>📊 监控类型</h2>
                <div class="monitor-types">
                    <label class="checkbox-item">
                        <input type="checkbox" id="monitorXHR" checked>
                        <span class="checkmark"></span>
                        <span class="checkbox-label">XMLHttpRequest (AJAX)</span>
                    </label>
                    
                    <label class="checkbox-item">
                        <input type="checkbox" id="monitorFetch" checked>
                        <span class="checkmark"></span>
                        <span class="checkbox-label">Fetch API</span>
                    </label>
                    
                    <label class="checkbox-item">
                        <input type="checkbox" id="monitorImages" checked>
                        <span class="checkmark"></span>
                        <span class="checkbox-label">图片资源</span>
                    </label>
                    
                    <label class="checkbox-item">
                        <input type="checkbox" id="monitorScripts" checked>
                        <span class="checkmark"></span>
                        <span class="checkbox-label">JavaScript脚本</span>
                    </label>
                    
                    <label class="checkbox-item">
                        <input type="checkbox" id="monitorStyles" checked>
                        <span class="checkmark"></span>
                        <span class="checkbox-label">CSS样式</span>
                    </label>
                    
                    <label class="checkbox-item">
                        <input type="checkbox" id="monitorDocuments" checked>
                        <span class="checkmark"></span>
                        <span class="checkbox-label">HTML文档</span>
                    </label>
                </div>
            </section>

            <!-- 高级设置 -->
            <section class="config-section">
                <h2>⚙️ 高级设置</h2>
                <div class="setting-item">
                    <label class="number-setting">
                        <span class="setting-label">最大记录数量</span>
                        <input type="number" id="maxLogSize" min="100" max="10000" value="1000" class="number-input">
                    </label>
                    <p class="setting-description">超过此数量时将自动删除最旧的记录</p>
                </div>
                
                <div class="setting-item">
                    <label class="switch-container">
                        <span class="setting-label">记录请求体</span>
                        <input type="checkbox" id="logRequestBody" checked>
                        <span class="switch-slider"></span>
                    </label>
                    <p class="setting-description">是否记录POST/PUT请求的请求体内容</p>
                </div>
                
                <div class="setting-item">
                    <label class="switch-container">
                        <span class="setting-label">记录响应体</span>
                        <input type="checkbox" id="logResponseBody" checked>
                        <span class="switch-slider"></span>
                    </label>
                    <p class="setting-description">是否记录响应体内容（可能影响性能）</p>
                </div>
            </section>
        </main>

        <footer class="footer">
            <div class="button-group">
                <button id="saveBtn" class="save-btn">💾 保存配置</button>
                <button id="resetBtn" class="reset-btn">🔄 恢复默认</button>
                <button id="exportConfigBtn" class="export-btn">📤 导出配置</button>
                <button id="importConfigBtn" class="import-btn">📥 导入配置</button>
            </div>
            <input type="file" id="importFileInput" accept=".json" style="display: none;">
            
            <div class="status-message" id="statusMessage"></div>
        </footer>
    </div>

    <script src="options/index.js" type="module"></script>
</body>
</html> 